<!--vue模板-->
<template>
  <div class="root">
    <div>
      <span class="basic">基础信息</span>
    </div>
    <el-form
      ref="formRel"
      :model="data"
      label-width="150px"
      style="max-width: 1000px; margin-top: 20px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="市场:">
            <el-select
              v-model="data.market"
              placeholder="请选择"
              @change="chgmarket"
            >
              <el-option
                v-for="item in marketOptions"
                :key="item.dictValue"
                :label="item.dictName"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国家:">
            <el-select v-model="data.country" placeholder="请选择">
              <el-option
                v-for="item in countryOptions"
                :key="item.dictValue"
                :label="item.dictName"
                :value="item.dictName"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户公司名称:">
            <el-input v-model="data.companyName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机型:">
            <el-input v-model="data.type" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="成交/询价产品:">
            <el-radio-group v-model="data.enquiryProduct">
              <el-radio :value="1">配件</el-radio>
              <el-radio :value="2">固定设备</el-radio>
              <el-radio :value="3">移动设备</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="感兴趣的产品:">
            <el-select
              v-model="product"
              value-key="id"
              placeholder="请选择"
              style="width: 100vw"
              @change="chgprod"
            >
              <el-option
                v-for="item in productOptions"
                :key="item.id"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户联系人:">
            <el-input v-model="data.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系手机:">
            <el-input v-model="data.mobile" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户邮箱:">
            <el-input v-model="data.email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人">
            <el-input v-model="data.boss" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="老板联系手机:"
            >!!!没绑属性!!!!
            <el-input v-model="data.companyName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板邮箱:"
            >!!!!没绑属性!!!!!!
            <el-input v-model="data.type" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系地址:">
            <el-input v-model="data.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户目的港口:">
            <el-input v-model="data.port" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户分类:">
            <el-select
              v-model="data.category"
              placeholder="请选择"
              style="width: 100vw"
            >
              <!-- <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              /> -->
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型:">
            <el-select
              v-model="data.customerType"
              placeholder="请选择"
              style="width: 100vw"
            >
              <!-- <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              /> -->
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="公司简介:">
            <el-input
              v-model="data.desc"
              style="width: 100vw"
              :rows="5"
              type="textarea"
              placeholder="多行输入"
            />
          </el-form-item>
        </el-col>
        <el-col :span="0"> &nbsp; </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户目的地:">
            <el-input v-model="data.dest" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="目的地和快递地址是否一致" label-width="200px">
            <el-radio-group v-model="data.isFit">
              <el-radio :value="0">一致</el-radio>
              <el-radio :value="1">不一致</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">&nbsp; </el-col>
        <el-col :span="12"> &nbsp; </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="快递地址:">
            <el-input v-model="data.expressAddress" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12"> &nbsp; </el-col>
      </el-row>

      <!--账号信息-->
      <div>
        <span class="basic">账号信息</span>
      </div>
      <el-form-item label="归属销售:" style="margin-top: 20px">
        <el-select
          v-model="data.customerType"
          placeholder="请选择"
          style="width: 100vw"
        >
          <!-- <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              /> -->
        </el-select>
      </el-form-item>
      <el-form-item label="账号:">
        <el-input placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input placeholder="请输入" type="password"></el-input>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="12" style="text-align: right">
        <el-button type="primary" @click="save">保存</el-button>
      </el-col>
      <el-col :span="12">
        <el-button type="info" @click="cls">取消</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import { queryDict } from "@/api/dict.js";
import { queryAll } from "@/api/product.js";
import { da } from "element-plus/es/locales.mjs";
defineOptions({
  name: "TabQueryDetail"
});

let input = ref();
const product = ref({});
const customer = ref({
  market: 1,
  country: "",
  companyName: "",
  type: "",
  enquiryProduct: "",
  productId: "",
  productName: "",
  name: "",
  mobile: "",
  email: "",
  boss: "",
  address: "",
  port: "",
  category: "",
  customerType: "",
  desc: "",
  dest: "",
  isFit: 0,
  expressAddress: "",
  saleId: 0,
  createTime: "",
  updateTime: "",
  createUserId: 0
});

//市场选项
const marketOptions = ref([]);

//国家选项
const countryOptions = ref([]);

//产品选 项
const productOptions = ref([]);

//响应式对象
const data = ref({
  market: "",
  country: "",
  companyName: "",
  type: "",
  enquiryProduct: "",
  productId: "",
  productName: "",
  name: "",
  mobile: "",
  email: "",
  boss: "",
  address: "",
  port: "",
  category: "",
  customerType: "",
  note: "",
  dest: "",
  isFit: "",
  expressAddress: "",
  saleId: "",
  createUserId: "",
  userId: ""
});
//声明事件
const emits = defineEmits(["close", "refresh"]);

//选择产品
function chgprod(v) {
  data.value.productId = v.id;
  data.value.productName = v.name;
}

//查询产品
async function queryProduct() {
  let res = await queryAll();
  if (res.code == 200) {
    productOptions.value = res.data;
    if (res.data.length > 0) {
      product.value = res.data[0];
      data.value.productId = product.value.id;
      data.value.productName = product.value.name;
    }
  }
}

//查询省或国家
async function queryCountry(type) {
  let res = await queryDict(type);
  if (res.code == 200) {
    countryOptions.value = res.data;
  }
}

//选择市场
function chgmarket(v) {
  if (v == 1) {
    //内销 查省
    queryCountry("province");
  } else {
    //查国家
    queryCountry("country");
  }
}

//查询市场
async function queryMarket() {
  let res = await queryDict("market");
  if (res.code == 200) {
    marketOptions.value = res.data;
  }
}

//保存
async function save() {
  console.log("data>>>", data.value);

  return;
  //新增
  let res = null; //await saveCustomer(data.value);
  console.log(data.value);

  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件刷新数据
    emits("refresh");
    cls();
  }
}
//方法
function cls() {
  //通知父组件  我要关闭了
  emits("close");
}

onBeforeMount(() => {
  queryMarket();
  queryProduct();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.basic {
  font-size: 24px;
  font-weight: bold;
  color: #0054a6;
  margin-left: 30px;
  margin-top: 20px;
  display: inline-block;

  border-style: none;
  border-left: #0054a6 solid 4px;
  padding-left: 10px;
}
</style>
